import 'package:bxultimate/app/theme/app_theme.dart';
import 'package:bxultimate/app/theme/gaps.dart';
import 'package:bxultimate/domain/home/home_data_dto.dart';
import 'package:bxultimate/resources/assets.dart';
import 'package:bxultimate/widgets/app/app_title.dart';
import 'package:bxultimate/widgets/mk_load_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class AppArticleCard extends StatefulWidget {
  final GestureTapCallback? onTap;
  final Article article;

  const AppArticleCard({super.key, this.onTap, required this.article});

  @override
  State<AppArticleCard> createState() => _AppArticleCardState();
}

class _AppArticleCardState extends State<AppArticleCard> {
  Widget _buildNoPic() {
    return Container(
      padding: EdgeInsets.all(AppTheme.iDefaultPadding),
      margin: EdgeInsets.only(bottom: AppTheme.iDefaultPadding),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(AppTheme.iDefaultRadius),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "${widget.article.title}",
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600,),
          ),
          Gaps.vGap4,
          Text(
            "${widget.article.content}",
            maxLines: 2,
            style: TextStyle(
                fontSize: 12,
                color: Colors.grey,
                overflow: TextOverflow.ellipsis),
          ),
          Gaps.vGap8,
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              AppTitle(
                title: "浏览量 ${widget.article.views}",
                icon: Assets.homeFire,
                textStyle: TextStyle(fontSize: 10, color: Color(0xffE8684A)),
              ),
              Text(
                '${widget.article.dateStr}',
                style: TextStyle(color: Color(0xFF909399), fontSize: 10),
              )
            ],
          )
        ],
      ),
    );
  }

  Widget _buildMorePic() {
    double picWidth = (Get.width - AppTheme.iDefaultPadding * 4 - 6) / 3;
    return Container(
      padding: EdgeInsets.all(AppTheme.iDefaultPadding),
      margin: EdgeInsets.only(bottom: AppTheme.iDefaultPadding),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(AppTheme.iDefaultRadius),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "${widget.article.title}",
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
          ),
          Gaps.vGap4,
          Text(
            "${widget.article.content}",
            maxLines: 1,
            style: TextStyle(
                fontSize: 12,
                color: Colors.grey,
                overflow: TextOverflow.ellipsis),
          ),
          Gaps.vGap8,
          Row(
            children: [
              ...widget.article.imgUrl!.split(",").map((e) => Padding(
                    padding: EdgeInsets.all(1),
                    child: ClipRRect(
                      borderRadius:
                          BorderRadius.circular(AppTheme.iDefaultRadius),
                      child: MkLoadImage(
                        e,
                        width: picWidth,
                        height: picWidth,
                      ),
                    ),
                  ))
            ],
          ),
          Gaps.vGap8,
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              AppTitle(
                title: "浏览量 ${widget.article.views}",
                icon: Assets.homeFire,
                textStyle: TextStyle(fontSize: 10, color: Color(0xffE8684A)),
              ),
              Text(
                '${widget.article.dateStr}',
                style: TextStyle(color: Color(0xFF909399), fontSize: 10),
              )
            ],
          )
        ],
      ),
    );
  }

  Widget _buildOnePic() {
    return Container(
      padding: EdgeInsets.all(AppTheme.iDefaultPadding),
      margin: EdgeInsets.only(bottom: AppTheme.iDefaultPadding),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(AppTheme.iDefaultRadius),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "${widget.article.title}",
                    style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
                  ),
                  Gaps.vGap4,
                  Text(
                    "${widget.article.content}",
                    maxLines: 3,
                    style: TextStyle(
                        fontSize: 12,
                        color: Colors.grey,
                        overflow: TextOverflow.ellipsis),
                  ),
                  Gaps.vGap8,
                ],
              )),
              Gaps.hGap4,
              ClipRRect(
                borderRadius: BorderRadius.circular(AppTheme.iDefaultRadius),
                child: MkLoadImage(
                  widget.article.imgUrl!,
                  width: 100,
                  height: 70,
                ),
              )
            ],
          ),
          Gaps.vGap4,
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              AppTitle(
                title: "浏览量 ${widget.article.views}",
                icon: Assets.homeFire,
                textStyle: TextStyle(fontSize: 10, color: Color(0xffE8684A)),
              ),
              Text(
                '${widget.article.dateStr}',
                style: TextStyle(color: Color(0xFF909399), fontSize: 10),
              )
            ],
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    if (widget.article.imgUrl == null) {
      return GestureDetector(
        onTap: widget.onTap,
        child: _buildNoPic(),
      );
    }

    if (widget.article.imgUrl!.split(",").length > 1) {
      return GestureDetector(
        onTap: widget.onTap,
        child: _buildMorePic(),
      );
    }

    return GestureDetector(
      onTap: widget.onTap,
      child: _buildOnePic(),
    );
  }
}
